<template>
  <div class="main">
    <!-- 背景画布 -->
    <canvas id="particle-canvas" width="1199" height="1048"></canvas>
    <div class="content">
      <div class="login">
        <div class="title">超叔管理系统</div>
        <el-form
          size="mini"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="50px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="loginId">
            <el-input
              type="text"
              v-model="ruleForm.loginId"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input
              type="password"
              v-model="ruleForm.loginPwd"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="checkMe">
            <el-checkbox v-model="ruleForm.checkMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
//导入md5
import { strToMd5 } from "../util/md5";
//导入背景画布动画方法
import { start } from "../assets/js/login";
export default {
  //DOM加载完毕
  mounted() {
    start();
  },
  data() {
    // 验证账号
    var validateloginId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    // 验证密码方法
    var validateloginPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      // 表单数据
      ruleForm: {
        // 登录名
        loginId: "",
        // 登录密码
        loginPwd: "",
        checkMe:false,
      },
      // 表单的验证数据
      rules: {
        //验证账号
        loginId: [{ validator: validateloginId, trigger: "blur" }],
        //验证密码
        loginPwd: [{ validator: validateloginPwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 表单提交方法
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        // 判断表单数据是否验证成功
        if (valid) {
          // 实现登录
          // 对密码进行加密
          this.ruleForm.loginPwd = strToMd5(this.ruleForm.loginPwd);
          let rsp = await this.$post("/PC/PCLogin", this.ruleForm);
          if (rsp.code == "0") {
            //服务器返回一个token(令牌)
            //所以。需要保存改token信息，通常会保存在浏览器的缓存空间中
            //浏览器的缓存空间，有两种：localStorage和sessionStorage
            //区别localStorage里面保存的数据会一直存在，sessionStorage里面保存的数据随着浏览器的关闭而自动清空
            sessionStorage.setItem("AUTH_TOKEN", rsp.data.sessionId);
            //在浏览器中保存登录名
            localStorage.setItem("loginId",this.ruleForm.loginId);
            //判断是否点击保存密码
            if(this.ruleForm.checkMe){
               localStorage.setItem("loginPwd",this.ruleForm.loginPwd);
            }
            // 将token信息放到请求头中
            this.$setToken();
            this.$router.push('/layout');
          }else{
             this.$msg_error(rsp.message);
          }
        } else {
          return false;
        }
      });
    },
    // 表单重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="scss">
// 背景画布样式
#particle-canvas {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgb(10, 10, 50) 0%,
    rgb(60, 10, 60) 100%
  );
  vertical-align: middle;
}
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  .content {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    .login {
      width: 440px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      .title {
        font-size: 18px;
        color: white;
        text-align: center;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
